<template>
    <div class="container">
        <div class="search">
            <img src="@/assets/images/search-grey.png">
            <input type="text" placeholder="输入城市名、拼音或字母查询" v-model.trim="searchCity">
        </div>
        <div class="chunk"></div>
        <!-- 热门城市 -->
        <!-- <div class="hot" v-show="!searchCity.length">
            <span class="title f14 b">热门城市</span>
            <div class="list">
                <div class="item b f14" v-for="(item, index) in city[0]['city']" :key="index" @click="selectCity(item)">
                    {{ item }}</div>
            </div>
        </div> -->
        <!-- 城市列表 -->
        <van-index-bar :sticky="false" v-show="!searchCity.length">
            <div v-for="item in city" :key="item.title">
                <van-index-anchor :index="item.title" />
                <van-cell v-for="(ele, index) in item['city']" :title="ele" :key="index" @click="selectCity(ele)" />
            </div>
        </van-index-bar>
        <!-- 搜索列出来的城市 -->
        <div class="search-content">
            <van-cell v-for="(ele, index) in filterCity" :title="ele" :key="index" @click="selectCity(ele)" />
        </div>
        <loading v-if="!allCityName.length"></loading>
    </div>
</template>
<script>
import { pinyin } from 'pinyin-pro';
import { IndexBar, IndexAnchor, Cell } from 'vant';
import { cityClass } from "@/common/selectCity";
export default {
    name: "SelectCity",
    data() {
        return {
            searchCity: "",
            city: cityClass,
            filterCity: [],
            allCityName: [],
        }
    },
    components: {
        [IndexBar.name]: IndexBar,
        [IndexAnchor.name]: IndexAnchor,
        [Cell.name]: Cell,
    },
    watch: {
        searchCity(newValue) {
            if (!newValue) return;
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                const filterCity = []
                this.allCityName.forEach(item => {
                    const index = item.indexOf(newValue);
                    if (index != -1) filterCity.push(item);
                })
                this.filterCity.splice(0);
                this.filterCity.push(...filterCity)
            }, 500)
        }
    },
    created() {
        this.getAllCity();
    },
    methods: {
        cusSort() {
            return this.allCityName.sort(function (a, b) {
                return a.localeCompare(b);
            });
        },
        getAllCity() {
            this.$sendGet("Shop/getAreas")
                .then(res => {
                    const { sub } = res.data.data[0]
                    const allCityName = [];
                    //把所有县级城市存到allCityName变量
                    sub.forEach(item => {
                        if ("sub" in item) {
                            item.sub.forEach(ele => {
                                allCityName.push(ele.name)
                            })
                        }
                    })
                    this.allCityName.push(...allCityName)
                    //根据汉字首字母排序
                    const allCityNameArray = this.cusSort();
                    //遍历所有的汉字
                    allCityNameArray.forEach(ele => {
                        //转成拼音
                        const item = pinyin(ele, { toneType: 'none' })
                        //拿到拼音首字母转大写
                        const initial = item.substring(0, 1).toUpperCase()
                        //找到首字母所在的位置
                        const index = cityClass.findIndex(item => item.title === initial);
                        //将其push
                        if (index !== -1)
                            cityClass[index].city.push(ele)
                    })

                })
        },
        selectCity(city) {
            localStorage.setItem('city', city);
            this.$router.back();
        }

    },
}
</script>
<style lang="scss" scoped>
::v-deep .van-index-bar__sidebar {
    top: 80px;
    transform: none;

    span {
        font-size: 12px;
        margin-bottom: 3px;
    }
}

::v-deep .van-index-anchor {
    padding-left: 0;
}

::v-deep .van-cell {
    padding-left: 0;
}

.container {
    padding: 10px;

    .search {
        width: 375px;
        height: 65px;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        padding: 10px;
        z-index: 9999;
        border-top: 10px solid white;
        background-color: white;

        img {
            position: absolute;
            width: 25px;
            object-fit: contain;
            top: 50%;
            left: 15px;
            transform: translateY(-50%);
        }

        input {
            width: 100%;
            outline: 0;
            border: 0;
            border-radius: 5px;
            padding: 10px;
            padding-left: 30px;
            background-color: #f9f9f9;

            &::placeholder {
                font-size: 14px;
            }
        }
    }

    .chunk {
        height: 60px;
    }

    .hot {
        .title {
            color: #b7b7b7;
            display: inline-block;
        }

        .list {
            padding-right: 10px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            .item {
                display: inline-block;
                border-radius: 4px;
                border: 1px solid #f4f4f4;
                width: 75px;
                margin-right: 10px;
                display: flex;
                align-items: center;
                padding: 5px 0;
                justify-content: center;
            }
        }
    }
}
</style>